/*
  https://flutter.cn/docs/development/ui/layout

  通用布局 widgets
  Flutter 有一个丰富的布局 widget 仓库，里面有很多经常会用到的布局 widget。目的是为了让你更快的上手，而不是被一个完整的列表吓跑。关于其他有用的 widget 的信息，
  可以参考 Widget 目录，或者使用 API 参考文档 中的搜索框。而且，API 文档中的 widget 页面中经常会给出一些关于相似的 widget 哪个会更适合你的建议。

  下面的 widget 会分为两类：widgets 库 中的标准 widgets 和 Material 库 中的 widgets。任何 app 都可以使用 widget 库，但是 Material 库中的组件只能在 Material app 中使用。

  标准 widgets
  Container：向 widget 增加 padding、margins、borders、background color 或者其他的“装饰”。

  GridView：将 widget 展示为一个可滚动的网格。

  ListView：将 widget 展示为一个可滚动的列表。

  Stack：将 widget 覆盖在另一个的上面。

  Material widgets
  Card：将相关信息整理到一个有圆角和阴影的盒子中。

  ListTile：将最多三行的文本、可选的导语以及后面的图标组织在一行中。

  Container
  许多布局都可以随意的用 Container，它可以将使用了 padding 或者增加了 borders/margins 的 widget 分开。你可以通过将整个布局放到一个 Container 中，并且改变它的背景色或者图片，来改变设备的背景。


   摘要 (Container)
  增加 padding、margins、borders

  改变背景色或者图片

  只包含一个子 widget，但是这个子 widget 可以是行、列或者是 widget 树的根 widget

  示例 (Container)
  这个布局包含一个有两行的列，每行有两张图片。 Container 用来将列的背景色变为浅灰色。


 */

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;



void main() {
  // debugPaintSizeEnabled = true;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '',
      home: Scaffold(
        appBar: AppBar(
            title: const Text(
                '用 Container，它可以将使用了 padding 或者增加了 borders/margins 的 widget 分开')),
        body: Center(
          child: _buildImageColumn(),
        ),
      ),
    );
  }
}

Widget _buildImageColumn() {
  return Container(
    decoration: const BoxDecoration(
      // color: Colors.black26,//这个布局包含一个有两行的列，每行有两张图片。 Container 用来将列的背景色变为浅灰色
      color: Colors.white,
    ),
    child: Column(
      children: [_buildImageRow(1), _buildImageRow(3)],
    ),
  );
}

//Container 还用来为每个图片添加圆角和外边距：
Widget _buildDecoratedImage(int imgIndex) => Expanded(
        child: Container(
      decoration: BoxDecoration(
        border: Border.all(width: 10, color: Colors.black38),
        borderRadius: const BorderRadius.all(Radius.circular(8)),
      ),
      margin: const EdgeInsets.all(4),
      child: Image.asset('images/container/pic$imgIndex.jpg'),
    ));

Widget _buildImageRow(int imgIndex) => Row(
      children: [
        _buildDecoratedImage(imgIndex),
        _buildDecoratedImage(imgIndex + 1)
      ],
    );
